<template>
  <el-date-picker
    v-model="value"
    type="date"
    :placeholder="placeholder"
    :disabled="disabled"
    :disabled-date="disabledDate"
    @change="onChange"
    @blur="onBlur"
    @focus="onFocus"
  />
<!--  picker-options="{‘firstDayOfWeek’: 1}"-->

</template>

<script>
import {computed, defineComponent} from 'vue'

export default defineComponent({
  name: 'Index',
  props: {
    placeholder: {
      type: String,
      default: '',
    },
    date: {
      type: String,
      default: '',
    },
    disabledDate: {
      type: Function,
      default: () => {
        return false
      },
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    const value = computed({
      get() {
        var da = new Date(props.date)
        var hour = da.getHours() - 8
        da.setHours(hour)
        return da
      },
      set(val) {
        if (!val){
          emit('update:date', '')
        }else {
          var da = new Date(val)
          var hour = da.getHours() + 8
          da.setHours(hour)
          var timeStr = da.getTime()
          timeStr += (60 * 60 * 24 - 1) * 1000
          const dateTime = new Date(timeStr)
          const str = dateTime.toISOString().replace('.000Z', '+08:00')
          emit('update:date', str)
        }

        return props.date
      },
    })

    const onChange = (val) => {
      emit('change', val)
    }

    const onBlur = (val) => {
      emit('blur', val)
    }

    const onFocus = (val) => {
      emit('focus', val)
    }

    return {
      value,

      onChange,
      onBlur,
      onFocus,
    }
  },
})
</script>

<style scoped>
</style>
